<template>
    <div class="loadPlan">
        <!-- 预演标题 -->
        <div class="toolBtn">
            <div>
                <span>{{ planName }}</span>
                <!-- <span>{{ currTime }}</span> -->
            </div>
            <div class="yybtn"  @click="back">
                <img src="@/assets/imgNew/Dialogcloseicon.png" style="cursor: pointer;height: 16px;width: 16px;" alt=""> <div>退出预演</div>
            </div>
            <div class="yybtn"   v-if="!isShowData"  @click="showData">
                <img  src="@/assets/newimg/arrowsDown.png"  >
                <div>展开数据</div>
            </div>
            <div class="yybtn"   v-if="isShowData"   @click="showData">
                <img  class="closeTransIcon"  src="@/assets/newimg/arrowsDown.png" >
                <div>收起数据</div>
            </div>
        </div>
        <!-- 数据 -->
        <div  class="yyDataList" v-show="isShowData">
            <schemeDetailsDataUe/>
        </div>

        <!-- 环视、淹没过程工具btn -->
        <div class="temp-btns2">
            <div>
                <div class="btn" :class="{ active: btn === 'ymgc' }" @click="onPlanYMGC">数据底板</div>
                <div v-if="btn === 'ymgc'" class="box">
                    <div  class="btn btnSelf " :class="{ active: addAlpha }" @click="onPlanaddAlpha">
                        开启透明
                    </div>
                    <div  class="btn btnSelf " :class="{ active: hongWater }" @click="onPlanhongWater">
                        洪水颜色
                    </div>
                    <div  class="btn btnSelf " :class="{ active: addHeat }" @click="onPlanaddHeat">
                        突显深度
                    </div>
                    <div  class="btn btnSelf " :class="{ active: addRian }" @click="onPlanMNJY">
                        模拟降雨
                    </div>
                    <div  class="btn btnSelf " :class="{ active: addMax }" @click="InundationRangeMax">
                        最大建模网格
                    </div>
                </div>
            </div>
        </div>
        <div v-if="btn === 'jygc'" class="legend">
            <div class="row">
                <div class="circle" style="background: #ffffff" />
                <span>无雨</span>
            </div>
            <div class="row">
                <div class="circle" style="background: #a3f58a" />
                <span>小雨</span>
            </div>
            <div class="row">
                <div class="circle" style="background: #53cd53" />
                <span>中雨</span>
            </div>
            <div class="row">
                <div class="circle" style="background: #5ab4fd" />
                <span>大雨</span>
            </div>
            <div class="row">
                <div class="circle" style="background: #2323ff" />
                <span>暴雨</span>
            </div>
            <div class="row">
                <div class="circle" style="background: #fd04fd" />
                <span>大暴雨</span>
            </div>
            <div class="row">
                <div class="circle" style="background: #fe6701" />
                <span>特大暴雨</span>
            </div>
        </div>
        <div v-if="btn === 'hsgc'" class="legend">
            <div class="row">
                <div class="line" style="background: #7FD165" />
                <span>&lt;2年一遇</span>
            </div>
            <div class="row">
                <div class="line" style="background: #309EF3" />
                <span>2~5年一遇</span>
            </div>
            <div class="row">
                <div class="line" style="background: #E8E500" />
                <span>5~10年一遇</span>
            </div>
            <div class="row">
                <div class="line" style="background: #F2A408" />
                <span>10~20年一遇</span>
            </div>
            <div class="row">
                <div class="line" style="background: #EF3C45" />
                <span>20~50年一遇</span>
            </div>
            <div class="row">
                <div class="line" style="background: #964FD2" />
                <span>50~100年一遇</span>
            </div>
            <div class="row">
                <div class="line" style="background: #C93EC0" />
                <span>&gt;100年一遇</span>
            </div>
        </div>
    </div>
</template>

<script>
import waterMesh from '../../../map/cesium/mixins/waterMesh'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
import schemeDetailsDataUe from '@/views/main/Rehearsal/schemeDetailsDataUe.vue'


export default {
    name: 'LoadPlan',
    components: {schemeDetailsDataUe},
    mixins: [waterMesh],
    props: {
        nameInfo: String,
    },
    data() {
        return {
            // 方案详情
            nameInfoTop: '',
            detailsd: '',

            showPage: false,
            btnName: '',
            btnType: '',
            btn: '',
            addAlpha: false,
            hongWater: false,
            addHeat: false,
            addRian: false,
            addMax: false,
            m: false,
            swmy: false,
            hs: false,
            value: '',
            colorsJYGC: ['#FFFFFF', '#a3f58a', '#53cd53',
                '#5ab4fd', '#2323ff', '#fd04fd', '#fe6701'],
            cameraPath: [
                [109.96552, 34.14424, 1262, 293, -20, 5],
                [109.96031, 34.14381, 1259, 307, -19, 10],
                [109.95165, 34.14766, 1191, 333, -21, 10],
                [109.94861, 34.15080, 1132, 22, -15, 10], // 第一桥
                [109.94941, 34.15324, 1150, 33, -19, 10], // 第一桥
                [109.95133, 34.15541, 1113, 30, -20, 10], // 第二桥
                [109.95290, 34.15143, 2775, 44, -84, 10]//
            ],
            currIndex: 0,
            currTime: '',
            planName: '',
            duration: 0,
            isShowData:true, //是否展开数据
        }
    },
    computed: {
        SceneMode() {
            return this.$store.getters.SceneMode
        },
        // 流域编码
        basin() {
            return this.$store.getters.basin
        },
        playerIndex() {
            return this.$store.getters.playerIndex
        },
        playerTime() {
            return this.$store.getters.playerTime
        },
    },
    watch: {
        playerIndex: {
            handler: function (index) {
                this.currTime = this.timeList[index]
                if (this.$store.getters.playerParams.name === 'PlanJYGC') {
                    this.$nextTick(() => {
                        this.playPlanJYGC(index)
                    })
                }
                if (this.$store.getters.playerParams.name === 'PlanHSGC') {
                    this.$nextTick(() => {
                        this.playPlanHSGC(index)
                    })
                }
                if (this.$store.getters.playerParams.name === 'PlanYMGC') {
                    this.$nextTick(() => {
                        this.playWaterMesh(index)
                    })
                }
            }
        },
    },
    created() {
        var cnDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
        if (cnDiv && cnDiv != null && cnDiv.length > 0) {
            cnDiv[0].style.left = '1%'
        }
        this.planName = this.$parent.$data.planCurrSel.name
        this.planID = this.$parent.$data.planCurrSel.id
        this.$eventBus.$emit('changeBg', false)
        this.$store.dispatch('basinShow', false)
        this.$eventBus.$emit('openLayer', 'TERR')
        this.$eventBus.$emit('openLayer', 'DOMOL')
        this.entityMapJYGC = new Map()
        this.getonPlanYMGC();
    },
    beforeDestroy() {
        var cnDiv = document.getElementsByClassName('cesium-widget-cesiumNavigationContainer')
        this.clearPlanMNJY()
        if (cnDiv && cnDiv != null && cnDiv.length > 0) {
            cnDiv[0].style.left = '21%'
        }
        this.$store.dispatch('basinShow', true)
        this.$eventBus.$emit('changeBg', true)
        this.$eventBus.$emit('resetRIVLColor')
        this.swmy = true
        this.onPlanSWMY()
        this.stopRotate()
        
        this.$store.getters.pageState.RightYuyan = '30%'
        this.$store.getters.pageState.goToYuyan = false
    },
    methods: {
        //加载淹没过程数据
        getonPlanYMGC() {
            this.clearAll()
            if (this.SceneMode == true) {
                this.planID = this.$parent.$data.planCurrSel.id
                this.cellFile = this.$parent.$data.planCurrSel.cellResult
                this.curveFile = this.$parent.$data.planCurrSel.curveResult
                this.nodeFile = this.$parent.$data.planCurrSel.nodeResult
                this.getAllDatas().then(timeList => {
                    console.log(timeList)
                    this.timeList = timeList
                    var player = this.$store.getters.playerParams
                    player.name = 'PlanYMGC'
                    player.dragReal = false
                    player.width = '50%'
                    player.show = true
                    player.currIndex = 0
                    player.times = timeList
                    this.$store.dispatch('playerParams', player)
                    this.playWaterMesh(0)
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        // 淹没过程
        onPlanYMGC() {
            if (this.btn === 'ymgc') {
                this.btn = ''
            } else {
                this.btn = 'ymgc'
            }
        },
        onPlanHS() {
            this.hs = !this.hs
            this.btnName = 'sjdb'
            this.btn = ''
        },

        getCenter() {
            var center = Cesium.Cartesian3.fromDegrees(...this.centerPosition)
            const pointentity = this.$viewer.entities.add({
                position: center,
                point: {
                    color: Cesium.Color.fromCssColorString(`rgba(0, 0, 0, 0)`),
                    pixelSize: 0
                }
            })
            const offsetstart = new Cesium.HeadingPitchRange(
                3.827657527141585, // 水平方向的旋转角 0-360度
                -0.5138211629018499, // 垂直平面俯仰角 // 0-90度
                1000 // 相机高度
            )
            this.$viewer.flyTo(pointentity, {
                duration: 1,
                offset: offsetstart
            })

            // 飞到目标点之后,锁定目标
            setTimeout(
                () => {
                    this.$viewer.entities.remove(pointentity)
                    var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center)
                    // 相机位置初始化
                    this.$viewer.scene.camera.lookAtTransform(transform, offsetstart)
                    this.startRotate()
                }
            )
        },
        move() {
            this.$viewer.scene.camera.rotateRight(0.006)
        },
        // 开始旋转
        startRotate() {
            this.$viewer.clock.onTick.addEventListener(this.move)
        },
        // 停止旋转
        stopRotate() {
            this.$viewer.clock.onTick.removeEventListener(this.move)
            this.$store.getters.eventCesiumOption.leftPickFns.delete('环视取点')
            this.$viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
            this.$viewer.trackedEntity = undefined
            this.centerPosition = []
        },
        changeB3DM(e) {
            console.log(e)
            this.$eventBus.$emit('flyToB3DM', e)
        },
        back() {
            this.showPage = false
            this.$parent.$data.showPage = 'index'
            this.$parent.fatherFunction(true)
            this.$store.getters.pageState.RightYuyan = '30%'
            this.$store.getters.pageState.goToYuyan = false
            this.$store.getters.pageState.yuYanInfoType = 'FAXQ'
            var param = {
                "eventName": "PreviewEnd",  // 事件名称
                "previewCode": this.planID      // 预演编号
            }
            callUIInteraction("Web_PreviewEvent", param);
        },
        // 收起展开数据
        showData() {
            this.isShowData=! this.isShowData
        },

        // 三维漫游
        onPlanSWMY(xh) {
            if (xh !== 'xuhuan') {
                this.swmy = !this.swmy
                this.$viewer.camera.cancelFlight()
            }

            if (this.swmy) {
                this.$viewer.camera.flyTo({
                    duration: this.duration,
                    easingFunction: Cesium.EasingFunction.LINEAR_NONE,
                    destination: Cesium.Cartesian3.fromDegrees(
                        this.cameraPath[this.currIndex][0],
                        this.cameraPath[this.currIndex][1],
                        this.cameraPath[this.currIndex][2]),
                    orientation: {
                        heading: Cesium.Math.toRadians(this.cameraPath[this.currIndex][3]),
                        pitch: Cesium.Math.toRadians(this.cameraPath[this.currIndex][4]),
                        roll: 0.0
                    },
                    complete: () => {
                        this.currIndex++
                        if (this.currIndex > 4) {
                            this.currIndex = 0
                            this.duration = 0
                        } else {
                            this.duration = this.cameraPath[this.currIndex][5]
                        }
                        this.onPlanSWMY('xuhuan')
                    }
                })
            }
        },
        // 开启透明--水深深浅表现
        onPlanaddAlpha() {
            this.addAlpha = !this.addAlpha
            this.appearance = this.getAppearance()
            this.appearanceIn = this.getAppearanceIn()
            this.playWaterMesh(this.playerIndex)
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": '开启透明'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
        },
        //洪水颜色
        onPlanhongWater() {
            this.hongWater = !this.hongWater
            this.appearance = this.getAppearance()
            this.appearanceIn = this.getAppearanceIn()
            this.playWaterMesh(this.playerIndex)
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": '洪水颜色'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);

        },
        // 突显深度
        onPlanaddHeat() {
            this.addHeat = !this.addHeat
            this.appearance = this.getAppearance()
            this.playWaterMesh(this.playerIndex)
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": '突显深度'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
        },
        //模拟降雨
        onPlanMNJY() {
            if (!this.addRian) {
                this.addRian = true
                const Rain =
                    `
                uniform sampler2D colorTexture; //输入的场景渲染照片
                varying vec2 v_textureCoordinates;

                float hash(float x) {
                    return fract(sin(x * 133.3) * 13.13);
                }

                void main(void) {

                float time = czm_frameNumber / 180.0; // 速度
                vec2 resolution = czm_viewport.zw; //分辨率

                vec2 uv = (gl_FragCoord.xy * 2. - resolution.xy) / min(resolution.x, resolution.y);
                vec3 colorRain = vec3(.6, .7, .8); // 颜色

                float angle = .1;
                float si = sin(angle), co = cos(angle);
                uv *= mat2(co, -si, si, co);
                uv *= length(uv + vec2(0, 4.9)) * .3 + 1.;

                float v = 1. - sin(hash(floor(uv.x * 100.)) * 2.);
                float no1 = sin(20. * time * v + uv.y * (5. / (2. + v)));
                float clamp1 = abs(no1) - .98;
                float b = clamp(clamp1, 0., 1.) * 40.;
                colorRain *= v * b; //屏幕上雨的颜色

                gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(colorRain, 1), 0.33); //将雨和三维场景融合
                }
             `
                var rain = new Cesium.PostProcessStage({
                    name: 'czm_rain',
                    fragmentShader: Rain
                })
                this.$viewer.scene.postProcessStages.add(rain)
            } else {
                // this.addRian = true
                this.clearPlanMNJY()
            }
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": '模拟降雨'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
        },

        clearPlanMNJY() {
            this.addRian = false
            this.$viewer.scene.postProcessStages.removeAll()
        },
        //最大淹没范围
        InundationRangeMax() {
            this.addMax = !this.addMax;
            var param = {
                "eventName": "ButtonClickEvent",  // 事件名称
                "previewCode": '最大淹没范围'     // 重要的名称
            }
            callUIInteraction("Web_ButtonClickEvent", param);
        },
        onPlanHSGC() {
            this.clearAll()
            if (this.btn === 'hsgc') {
                this.btn = ''
            } else {
                this.btn = 'hsgc'
                // 洪水过程
                this.$store.dispatch('mapLoadingText', ['请求洪水过程数据...'])
                this.$api.Get('/api/CalcPreview/GetRvFloodProcess', {
                    ID: this.$parent.$data.planCurrSel.id
                }).then(res => {
                    var times = res.data.map(item => {
                        return item.tm
                    })
                    this.timesHSGC = res.data
                    this.$store.dispatch('mapLoadingText', [])
                    var player = this.$store.getters.playerParams
                    player.name = 'PlanHSGC'
                    player.show = true
                    player.width = '80%'
                    player.currIndex = 0
                    player.times = times
                    this.$store.dispatch('playerParams', player)
                    this.playPlanHSGC(0)
                    // console.log(times)
                })
            }
        },
        playPlanHSGC(index) {
            var timeRow = this.timesHSGC[index]
        },
        clearPlanHSGC(index) {
            this.$eventBus.$emit('resetRIVLColor')
        },
        onPlanJYGC() {
            this.clearAll()
            if (this.btn === 'jygc') {
                this.btn = ''
            } else {
                this.btn = 'jygc'
                var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/WATA.json`
                var getJosn = this.$axios.get(url)
                // 小流域降雨过程
                var getApi = this.$api.Get('/api/CalcPreview/GetWsRainProcess', {
                    ID: this.$parent.$data.planCurrSel.id
                })
                this.$store.dispatch('mapLoadingText', ['请求降雨过程数据...'])
                Promise.all([getJosn, getApi]).then(([resJson, resApi]) => {
                    // console.log(resJson)
                    // console.log(resApi)
                    resJson.data.features.forEach(feature => {
                        var WSCD = feature.properties.WSCD
                        var lonlats = []
                        var coordinates = feature.geometry.coordinates[0]
                        if (feature.geometry.type === 'MultiPolygon') {
                            coordinates = feature.geometry.coordinates[0][0]
                            // return
                        }

                        coordinates.forEach(coordinate => {
                            lonlats.push(...coordinate)
                        })
                        // console.log(WSCD)
                        // console.log(lonlats)
                        var polygonEntity = {
                            polygon: {
                                hierarchy: Cesium.Cartesian3.fromDegreesArray(lonlats),
                                material: Cesium.Color.RED.withAlpha(0.5)
                            }
                        }
                        polygonEntity = this.$viewer.entities.add(polygonEntity)
                        this.entityMapJYGC.set(WSCD, polygonEntity)
                    })
                    var times = resApi.data.map(item => {
                        return item.tm
                    })

                    this.timesJYGC = resApi.data
                    this.$store.dispatch('mapLoadingText', [])
                    var player = this.$store.getters.playerParams
                    player.name = 'PlanJYGC'
                    player.show = true
                    player.width = '50%'
                    player.dragReal = false
                    player.currIndex = 0
                    player.times = times
                    this.$store.dispatch('playerParams', player)
                    this.playPlanJYGC(0)
                })
            }
        },
        playPlanJYGC(index) {
            var timeRow = this.timesJYGC[index]
            console.log(timeRow)
            timeRow.rain.forEach(item => {
                var polygonEntity = this.entityMapJYGC.get(item.wscd)
                if (polygonEntity) {
                    var color = this.colorsJYGC[Number(item.level)]

                    if (Number(item.level) === 0) {
                        polygonEntity.polygon.material = Cesium.Color.fromCssColorString(color).withAlpha(0.0)
                    } else {
                        polygonEntity.polygon.material = Cesium.Color.fromCssColorString(color).withAlpha(0.5)
                    }
                }
            })
        },
        clearPlanJYGC() {
            if (this.entityMapJYGC.size > 0) {
                this.entityMapJYGC.forEach((val, key) => {
                    this.$viewer.entities.remove(val)
                })
                this.entityMapJYGC = new Map()
            }
        },
        clearAll() {
            this.$store.dispatch('playerClose')
            if (this.btn === 'jygc') this.clearPlanJYGC()
            if (this.btn === 'hsgc') this.clearPlanHSGC()
            if (this.btn === 'ymgc') {
                this.clearInWaterMesh()
                this.clearOutWaterMesh()
                this.clearMemory()
            }
        },
        setCameraPos(lon, lat, h, pitch) {
            this.$viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(lon, lat, h),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0), // east, default value is 0.0 (north)
                    pitch: Cesium.Math.toRadians(pitch), // default value (looking down)
                    roll: 0.0 // default value
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.loadPlan {
    position: relative;
    width: 100%;
    height: 100%;
    /*border: 1px solid red;*/
    pointer-events: none;
    z-index: 3;

    .backbtn {
        position: absolute;
        top: 0px;
        left: 10px;
        background: url(../../../assets/map/popHD/btnPlay.png) no-repeat top center;
        background-size: 100% 100%;
        font-size: 14px;
        padding: 5px 20px 7px 20px;
        /*letter-spacing: 12px;*/
        white-space: nowrap;
        pointer-events: auto;

        &:hover {
            background: url(../../../assets/map/popHD/btnPlay_active.png) no-repeat top center;
            background-size: 100% 100%;
        }
    }

    .toolBtn {
        min-width: 400px;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 0px;
        left: 932px;
        transform: translateX(-50%);
        background: url('~@/assets/imgNew/yuyanTitle.png') no-repeat;
        background-size: 100% 100%;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        padding: 5px 50px 7px 50px;
        /*letter-spacing: 12px;*/
        white-space: nowrap;
        pointer-events: auto;

        display: flex;
        flex-direction: row;
        //justify-content: space-between;
        justify-content: center;
        align-items: center;
        text-align: center;

        .name {
            font-size: 24px;
            font-weight: bold;
            font-family: 'MSTIFFHEIPRC';
        }

        .time {
            font-size: 24px;
        }

        img {
            margin-left: 20px;
            cursor: pointer;
        }

        .yybtn{
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #00F6FF;
            div{
                margin-left: 4px;
            }
            .closeTransIcon {
                transform: rotate(180deg);
            }
        }

    }
    .yyDataList{
        position: absolute;
        top: 60px;
        left: 932px;
        transform: translateX(-50%);
        background: url('~@/assets/imgNew/bg.png') no-repeat;
        background-size: 100% 100%;
    }
    

    .infoBox {
        width: 400px;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 0;
        //left: 50%;
        left: 932px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        //background: rgba(14, 81, 133, 0.61);
        background: url('~@/assets/imgNew/yuyanTitle.png') no-repeat;
        background-size: 100% 100%;
        padding: 5px 50px;

        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
    }

    .info {
        top: 0;
        display: flex;
        flex-direction: row;
        //justify-content: space-evenly;
        align-items: center;


        .name {
            font-size: 24px;
            font-weight: bold;
            font-family: 'MSTIFFHEIPRC';
        }

        .time {
            font-size: 24px;
        }

        img {
            cursor: pointer;
        }

    }


    .temp-btns {
        position: absolute;
        top: 0;
        right: 180px;
        height: 50px;
        display: flex;
        align-items: center;
        pointer-events: auto;

        .btn {
            background: rgba(14, 81, 133, 0.61);
            display: flex;
            align-items: center;
            padding: 5px 10px;
            border: 1px solid #0e5185;

            &:hover,
            &.active {
                box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
            }

            &.active3 {
                box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
            }


            &.addAlpha {
                position: absolute;
                right: 0px;
                top: 40px;
            }

            &.hongWater {
                position: absolute;
                right: 0px;
                top: 70px;
            }

            &.addHeat {
                position: absolute;
                right: 0px;
                top: 100px;
            }

            &.addRian {
                position: absolute;
                right: 0px;
                top: 130px;
            }
        }
    }

    .temp-btns2 {
        width: 180px;
        position: fixed;
        top: 9px;
        //right: 270px;
        right: 326px;
        height: 50px;
        display: flex;
        align-items: center;
        pointer-events: auto;
        z-index: 21;

        .btn {
            //min-width: 120px;
            height: 40px;
            background: url('~@/assets/imgNew/btnbg.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            padding: 5px 20px;
            margin: 5px 8px;
            font-size: 18px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #D0DDF1;

            &:hover,
            &.active {
                background: url('~@/assets/imgNew/btnactbg.png') no-repeat;
                background-size: 100% 100%;
            }

            &.btnSelf {
                margin: 0;
                background: none;
                font-size: 18px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #FFFFFF;
                display: flex;
                justify-content: center;
                width: 100%;
            }

            &.btnSelf:hover,
            &.btnSelf.active {
                background: rgba(0, 44, 111, 0.7);
                border-radius: 4px;
            }

            &.addAlpha {
                position: absolute;
                right: 0px;
                top: 40px;
            }

            &.hongWater {
                position: absolute;
                right: 0px;
                top: 70px;
            }

            &.addHeat {
                position: absolute;
                right: 0px;
                top: 100px;
            }

            &.addRian {
                position: absolute;
                right: 0px;
                top: 130px;
            }
        }

        .box {
            position: absolute;
            top: 52px;
            left: 0px;
            background: rgba(0, 102, 255, 0.6);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #00D2FF;
        }

        .box1 {
            position: absolute;
            top: 80px;
            right: -190px;
            background: rgba(0, 102, 255, 0.6);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #00D2FF;
        }

        .box2 {
            position: absolute;
            top: 52px;
            right: 5px;
            background: rgba(0, 102, 255, 0.6);
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid #00D2FF;
        }

    }

    .temp-btns3 {
        position: fixed;
        top: 68px;
        right: 25px;
        height: 50px;
        display: flex;
        align-items: center;
        pointer-events: auto;
    }


    .legend {
        position: absolute;
        left: 0;
        bottom: 0;

        .row {
            display: flex;
            align-items: center;

            .circle {
                width: 15px;
                height: 15px;
                margin-right: 5px;
            }

            .line {
                width: 25px;
                height: 3px;
                margin-right: 5px;
            }
        }

    }
}

.isShowtopflg {
    .info {
        top: 34px;
    }
}
</style>

<style lang="less" scoped>
/deep/ .dv-digital-flop {
    width: 100px;
    height: 30px;
    

    canvas{
        width: none;
        height: none;
        }
}
</style>